<template>
	<view>
		<u-popup :show="show" mode="bottom" @close="close" closeable>
			<view>
				<view class="bg-white">
					<view class="text-center text-xl text-black">请选择服务时间</view>
					<view>
						<view class="tab">
							<u-tabs :scrollable="false" :list="tabList" @click="dateClick"
								:activeStyle="{ color: 'var(--theme-color)', fontWeight: 'bold' }"
								lineColor="var(--theme-color)">
							</u-tabs>
						</view>
						<view class="list grid col-5 margin-top">
							<view class="padding-xs" v-for="(item, index) in list" :key="index">
								<view class="padding-sm radius-xl text-center"
									:class="item.state == 0 ? 'china-btn-bg' : 'bg-gray'" @click="selected(item)">
									{{ item.time }}
									<view class="text-sm" v-if="item.state == 0">可预约</view>
									<view class="text-sm" v-else-if="item.state == 2">已预约</view>
									<view class="text-sm" v-else-if="item.state == 1">不可选</view>
								</view>
							</view>

							<emptyData type="notOrder" top="10" v-if="emptyShow" text="暂无可服务时间"></emptyData>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false,
		},
		technicianId: {
			type: [Number, String],
			default: 0,
		},
		serviceDuration: {
			type: Number,
			default: 0,
		}
	},
	data() {
		return {
			emptyShow: false,
			tabList: [],
			list: [],
		};
	},
	watch: {
		show(val) {
			if (val) {
				this.getServeTime()
			}
		},
	},
	methods: {
		getServeTime() {
			if (!this.technicianId) { return }
			this.tabList = [];
			this.list = [];
			this.$utils.$api.Technician.getServiceTime(this.technicianId).then(data => {
				let d = '', tabListIndex = -1, sd = this.serviceDuration, sdIndex;
				const now = new Date();
				for (let i = 0; i < data.length; i++) {
					const item = data[i];
					for (let j = 0; j < item.matrix.length; j++) {
						let matrix = item.matrix[j];
						matrix.date = new Date(matrix.start_time.replace(/-/g, '/'));
						if (!d || d && (d.getFullYear() !== matrix.date.getFullYear() || d.getMonth() !== matrix.date.getMonth() || d.getDate() !== matrix.date.getDate())) {
							d = matrix.date;
							tabListIndex++;
							this.tabList.push({
								name: this.getDayName(d),
								date: d,
								list: []
							});
						}
						matrix.time = matrix.date.getHours().toString().padStart(2, '0') + ':' + matrix.date.getMinutes().toString().padStart(2, '0');
						if (matrix.date < now) {
							matrix.state = 1;
						}
						if (matrix.state === 2) {
							sdIndex = j;
							while (sd > matrix.duration) {
								sd -= matrix.duration;
								sdIndex--;
								const oldItem = this.tabList[tabListIndex].list[sdIndex];
								if (oldItem && oldItem.state === 0) {
									oldItem.state = 1;
								} else {
									sd = this.serviceDuration;
									break;
								}
							}
						}
						this.tabList[tabListIndex].list.push(matrix);
					}
				}
				this.list = this.tabList[0].list;
			}).catch(err => {
				this.emptyShow = true;
			})
		},
		dateClick(e) {
			this.list = this.tabList[e.index].list;
		},
		selected(item) {
			if (item.state !== 0) {
				return;
			}
			item.servive_time = `${this.getDayName(item.date)} ${item.date.getHours().toString().padStart(2, '0')}:${item.date.getMinutes().toString().padStart(2, '0')}`;
			this.$emit('serviceTimePopup', { type: 'confirm', data: item })
		},
		close() {
			this.$emit('serviceTimePopup', { type: 'colse', data: 0 });
		},
	}
}
</script>

<style lang="less" scoped>
.tab {
	width: 100%;
}
</style>
